<template>
  <div class="clock_main">
    <head-top head-title="监理" go-back="true"></head-top>
    <div class="back" @click="back"></div>
    <div class="help_top">
      <div class="help_title">
        <img :src="user.avatar" alt="">
        <div class="help_msg">
          <div class="msg_top">
            <p>{{user.name}}</p>
            <p>
              <span class="phone">{{detail.time}}</span>
            </p>
          </div>
          <div class="msg_bottom">
            <p>职位：{{user.occupation}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="line"></div>
    <div class="clock_title border-bottom">
      <span>点击打卡记录你的时间和位置</span>
    </div>
    <div class="clock_list">
      <ol>
        <li v-if="clockData.first_time" class="li">
          <p class="time">上班打卡时间{{clockData.first_time*1000 | dateFmt('HH:mm:ss')}}</p>
          <div class="address"><img src="./images/dingwei@2x.png" alt="" width="10" height="13"> <span
            class="address-des">{{clockData.first_address}}</span></div>
          <span class="before"></span><span class="after"></span>
          <div v-show="user.num===2&&clockData.first_time&&!clockData.fourth_time" @click="refresh('first')">
            <mt-button size="small" type="primary">更新打卡</mt-button>
          </div>
          <div v-show="user.num===4&&clockData.first_time&&!clockData.second_time" @click="refresh('first')">
            <mt-button size="small" type="primary">更新打卡</mt-button>
          </div>
        </li>
        <li v-if="clockData.second_time" class="li">
          <p class="time">下班打卡时间{{clockData.second_time*1000 | dateFmt('HH:mm:ss')}}</p>
          <p class="address"><img src="./images/dingwei@2x.png" alt="" width="10" height="13"> <span
            class="address-des">{{clockData.second_address}}</span></p>
          <span class="before"></span><span class="after"></span>
          <div v-show="user.num===4&&clockData.second_time&&!clockData.third_time" @click="refresh('second')">
            <mt-button size="small" type="primary">更新打卡</mt-button>
          </div>
        </li>
        <li v-if="clockData.third_time" class="li">
          <p class="time">上班打卡时间{{clockData.third_time*1000 | dateFmt('HH:mm:ss')}}</p>
          <p class="address"><img src="./images/dingwei@2x.png" alt="" width="10" height="13"> <span
            class="address-des">{{clockData.third_address}}</span></p>
          <span class="before"></span><span class="after"></span>
          <div v-show="user.num===4&&clockData.third_time&&!clockData.fourth_time" @click="refresh('third')">
            <mt-button size="small" type="primary">更新打卡</mt-button>
          </div>
        </li>
        <li v-show="clockData.fourth_time" class="li">
          <p class="time">下班打卡时间{{clockData.fourth_time*1000 | dateFmt('HH:mm:ss')}}</p>
          <p class="address"><img src="./images/dingwei@2x.png" alt="" width="10" height="13"> <span
            class="address-des">{{clockData.fourth_address}}</span></p>
          <span class="before"></span><span class="after"></span>
          <div v-show="user.num===2&&clockData.fourth_time" @click="refresh('fourth')">
            <mt-button size="small" type="primary">更新打卡</mt-button>
          </div>
          <div v-show="user.num===4&&clockData.fourth_time" @click="refresh('fourth')">
            <mt-button size="small" type="primary">更新打卡</mt-button>
          </div>
        </li>
      </ol>
    </div>
    <div class="btn_dc" v-show="!clockData.fourth_time">
      <mt-button class="ka" type="primary" @click="daka()">
        <span v-show="!clockData">上班打卡</span>
        <span v-show="clockData.first_time&&!clockData.second_time&&!clockData.third_time">下班打卡</span>
        <span v-show="clockData.second_time&&!clockData.third_time">上班打卡</span>
        <span v-show="clockData.third_time">下班打卡</span>
        <p ref="mybox">{{time}}</p>
      </mt-button>
    </div>
    <!--打卡成功的弹窗-->
    <mt-popup
      v-model="boxShow"
      popup-transition="popup-fade">
      <div class="clock_box">
        <div class="box_top">
          <div class="box_title">
            <img src="./images/xiantiao@2x.png" alt="">
            <span>打卡成功</span>
            <img src="./images/xiantiao@2x.png" alt="">
          </div>
          <div class="box_time">
            <span>时间：{{date | dateFmt('HH:mm:ss')}}</span>
          </div>
          <h4>地点</h4>
          <p>{{address}}</p>
        </div>
        <div class="box_btn">
          <span @click="cancel">取消</span>
          <span @click="confirm">确定</span>
          <!-- <mt-button size="small" type="primary">确定</mt-button>           -->
        </div>
      </div>
    </mt-popup>
    <mt-popup
      v-model="boxShowGengXin"
      popup-transition="popup-fade">
      <div class="clock_box">
        <div class="box_top">
          <div class="box_title">
            <img src="./images/xiantiao@2x.png" alt="">
            <span>打卡成功</span>
            <img src="./images/xiantiao@2x.png" alt="">
          </div>
          <div class="box_time">
            <span>时间：{{dateGengX | dateFmt('HH:mm:ss')}}</span>
          </div>
          <h4>地点</h4>
          <p>{{address}}</p>
        </div>
        <div class="box_btn">
          <span @click="cancel">取消</span>
          <span @click="confirmGengX">确定</span>
          <!-- <mt-button size="small" type="primary">确定</mt-button>           -->
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<style lang="scss">
  .mint-toast.is-placemiddle {
    z-index: 9999;
  }

  .clock_main {
    width: 100%;
    padding-top: 40px;
    background: #fff;
    position: relative;

    .back {
      width: 42px;
      height: 42px;
      line-height: 42px;
      opacity: 0;
      z-index: 667;
      position: absolute;
      top: 0;
      left: 0;
    }
    .mint-button--small {
      margin-top: 10px;
    }
    .help_top {
      width: 100%;
      .help_title {
        width: 100%;
        height: 65px;
        img {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          float: left;
          margin-top: 10px;
          margin-left: 10px;
        }
        .help_msg {
          float: right;
          width: 83%;
          height: 65px;
          .msg_top {
            width: 100%;
            height: 25px;
            margin-top: 12px;
            p:first-child {
              float: left;
              font-size: 15px;
            }
            p:last-child {
              float: right;
              margin-right: 10px;
              span {
                font-size: 13px;
                float: right;
                /*line-height: 33px;*/
                color: #0078de;
              }
            }
          }
          .msg_bottom {
            width: 100%;
            height: 32px;
            p {
              float: left;
              line-height: 15px;
              font-size: 12px;
              color: #808080;
            }
          }
        }
      }
    }
    .line {
      width: 100%;
      height: 10px;
      background: #f2f2f2;
    }
    .clock_title {
      margin: 0 10px;
      height: 33px;
      span {
        color: #656666;
        line-height: 33px;
        font-size: 13px;
      }
    }
    .clock_list {
      margin-top: 20px;
      ol {
        /*max-height: 300px;*/
        padding-left: 28px;
        padding-right: 20px;
        overflow: auto;
        /*height: 626px;*/
        li {
          position: relative;
          border-bottom: 1px solid #f5f5f5;
          margin-bottom: 30px;
          padding-bottom: 8px;
          .time {
            font-size: 15px;
            color: #000;
            font-weight: 900;
          }
          .address {
            margin-top: 20px;
            img {
              vertical-align: middle;
            }
            .address-des {
              vertical-align: middle;
              color: #0078de;
            }
          }
          .before {
            position: absolute;
            left: -13px;
            top: 15px;
            height: 82%;
            width: 0;
            border-left: 2px solid #0088cc;
          }
          .after {
            position: absolute;
            left: -16px;
            top: 3px;
            width: 8px;
            height: 8px;
            border-radius: 6px;
            background: #0088cc;
          }
        }
      }
    }
    .btn_dc {
      width: 100%;
      height: 130px;
      text-align: center;
      .ka {
        width: 127px;
        height: 127px;
        background: #0078de;
        display: inline-block;
        border-radius: 50%;
        span {
          font-size: 20px;
          color: #fff;
          font-weight: 500;
        }
        p {
          font-size: 15px;
          color: #fff;
          margin-top: 15px;
        }
      }
    }
    .mint-popup {
      width: 64%;
      border-radius: 5px;
      .clock_box {
        border-radius: 5px;
        background: #fff;
        text-align: center;
        .box_top {
          width: 100%;
          height: 240px;
          .box_title {
            display: inline-flex;
            justify-content: space-around;
            align-items: center;
            padding-top: 20px;
            img:first-child {
              transform: rotateY(180deg);
              width: 25%;
              height: 2px;
            }
            img:last-child {
              width: 25%;
              height: 2px;
            }
            span {
              font-size: 23px;
              color: #0078de;
            }
          }
          .box_time {
            width: 124px;
            height: 30px;
            background: #0078de;
            border-radius: 15px;
            display: inline-block;
            margin-top: 20px;
            span {
              color: #fff;
              font-size: 15px;
              line-height: 30px;
            }
          }
          h4 {
            font-size: 17px;
            color: #292929;
            margin-top: 20px;
            margin-bottom: 20px;
          }
          p {
            font-size: 15px;
            color: #666;
            padding: 0 20px 0 20px;
            line-height: 16px;
          }
        }
        .box_btn {
          // display: flex;
          height: 45px;
          span {
            // flex: 1;
            font-size: 15px;
            line-height: 45px;
            &:nth-of-type(1) {
              float: left;
              width: 50%;
              background: #f2f2f2;
              color: #000;
            }
            &:nth-of-type(2) {
              float: right;
              width: 50%;
              background: #0078de;
              color: #fff;
            }
          }
        }
      }
    }
  }
</style>
<script>
  import headTop from '../../components/header/Header.vue'
  import { getClockDetail, saveClockedData, getAddress } from '../../api/jianli.js'
  import { getConfig } from '../../api/homeLogin.js'
  import wx from 'weixin-js-sdk'

  export default {
    name: 'Clocked',
    data () {
      return {
        time: '',
        data: '',
        boxShow: false,
        boxShowGengXin: false,
        detail: {},
        user: {},
        clockData: {},
        date: '',
        address: '',
        dateGengX: '',
        ready: false
      }
    },
    components: {
      headTop
    },
    created () {
      this._getConfig()
      this._updateTime()
      this._getClockDetail()
      setInterval(this._updateTime, 1000)
    },
    methods: {
      back () {
        // this.$router.push('/TeamList')
        this.$router.push('/home/PunchClock')
      },
      // 获取jssdk——conifg
      _getConfig () {
        getConfig().then(res => {
          if (res.code === 200) {
            wx.config({
              debug: false,
              appId: res.data.appId,
              nonceStr: res.data.nonceStr,
              rawString: res.data.rawString,
              signature: res.data.signature,
              timestamp: res.data.timestamp,
              jsApiList: ['getLocation']
            })
            this.ready = true
          }
        })
      },
      _getLatLng () {
        if (this.ready) {
          var th = this
          wx.ready(() => {
            wx.getLocation({
              type: 'gcj02',
              success: function (res) {
                th._getAddress(res.longitude, res.latitude)
              },
              fail: function () {
                alert('请退出当前页面重试')
              }
            })
          })
        }
      },
      // 获取打卡人的信息
      _getClockDetail () {
        getClockDetail().then(res => {
          if (res.code === 200) {
            this.detail = res.data
            this.user = res.data.user
            this.clockData = res.data.data
          }
        })
      },
      // 根据wxjssdk获取打卡位置
      _getAddress (lng, lat) {
        getAddress(lng, lat).then(res => {
          this.address = res.data
        })
      },
      // 时间戳
      _updateTime () {
        var date = new Date()
        this.time = this._zeroPadding(date.getHours(), 2) + ':' + this._zeroPadding(date.getMinutes(), 2) + ':' + this._zeroPadding(date.getSeconds(), 2)
      },
      // 判定是否需补0操作
      _zeroPadding (num, digit) {
        var zero = ''
        for (var i = 0; i < digit; i++) {
          zero += '0'
        }
        return (zero + num).slice(-digit)
      },
      // 点击更新打卡获取打卡信息
      refresh (count) {
        this.address = ''
        this._getLatLng()
        this.boxShowGengXin = true
        this.dateGengX = Date.parse(new Date())
        this.count = count
      },
      // 判断是第几次打卡
      _number () {
        if (this.user.num === 4) {
          if (!this.clockData) {
            return 'first'
          } else if (this.clockData.first_time && !this.clockData.second_time) {
            return 'second'
          } else if (this.clockData.second_time && !this.clockData.third_time) {
            return 'third'
          } else {
            return 'fourth'
          }
        }
        if (this.user.num === 2) {
          if (!this.clockData) {
            return 'first'
          } else {
            return 'fourth'
          }
        }
      },
      // 点击打卡获取打卡时间和地址
      daka () {
        this.boxShow = true
        this.address = ''
        this._getLatLng()
        this.date = Date.parse(new Date())
      },
      // 确定打卡
      confirm () {
        saveClockedData(this._number(), this.clockData.check_id, this.address, this.user.employee_id, this.date).then(res => {
          if (res.code === 200) {
            this._getClockDetail()
          }
        })
        this.boxShow = false
      },
      // 更新打卡确定
      confirmGengX () {
        saveClockedData(this.count, this.clockData.check_id, this.address, this.user.employee_id, this.dateGengX).then(res => {
          if (res.code === 200) {
            this._getClockDetail()
          }
        })
        this.boxShowGengXin = false
      },
      // 取消打卡
      cancel () {
        this.boxShow = false
        this.boxShowGengXin = false
      }
    }
  }
</script>
